<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- <style>
        .imgFileUploade *{
            margin:0;padding:0;
        }
        .imgFileUploade html,body{
             font-family:Arial,Helvetica,sans-serif;
        }
        .imgFileUploade li{
            list-style: none;
        }
        .imgFileUploade img{
            border:none;display: block
        }
        .imgFileUploade .box{
            width: 1024px;margin: 50px auto;
        }
        .imgFileUploade{
            width: 100%;padding: 10px;
        }
        .imgFileUploade .header{
            height: 50px;width: 100%;line-height:50px;
        }
        .imgFileUploade .header span{
            display: block;float:left;
        }
        .imgFileUploade .header span.imgTitle{
            line-height:50px;
        }
        .imgFileUploade .header span.imgTitle b{
            color:red;margin:0 5px;line-height: 57px;display: block;float: right;font-size: 20px;
        }
        .imgFileUploade .header span.imgClick{
            width: 50px;height: 50px;margin-left: 10px;cursor: pointer;
            background: url(img/addUpload.png) no-repeat center center;background-size:cover;
        }
        .imgFileUploade .header span.imgcontent{
            color:#999;margin-left:120px;line-height: 50px;
        }
        .imgFileUploade .imgAll{
            width: 100%;    margin-top: 5px;
        }
        .imgFileUploade .imgAll ul:after{
                visibility: hidden;  display: block; font-size: 0; content: ".";  clear: both; height: 0
        }
        .imgFileUploade .imgAll li{
            width: 100px;height: 100px;border:solid 1px #ccc;margin:8px 5px;float: left;position: relative;box-shadow: 0 0 10px #eee;
        }
        .imgFileUploade .imgAll li img{
            position: absolute;top:0;left:0;width: 100%;height: 100%;display: block;
        }
        imgFileUploade .delImg{
            position: absolute;top:-10px;right:-7px;width: 22px;height: 22px;background: #000;border-radius: 50%;display: block;text-align:  center;line-height: 22px;color:#fff;font-weight: 700;font-style:normal;cursor: pointer;
        }
        .box,.box2,.box3,.box4{
            border:solid 1px #ccc;
        }
    </style>
    -->
    <link rel="stylesheet" href="imgFileupload.css"/>
</head>
<body>
<div class="box">
</div>
<div class="box2" style="width:700px;margin:50px auto"></div>
<div class="box3" style="width: 800px;margin:50px auto"></div>
<div class="box4" style="width: 900px;margin:50px auto"></div>

<div class="container">
    <!--读取要上传的文件-->
    <input type="file" id="file" multiple="multiple"  />
    <input type="button" id="btn1" value="点击上传" onclick="uploadClick();" />
</div>

<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script type="text/javascript" src="imgFileupload.js"></script>
<script type="text/javascript">
    var imgFile = new ImgUploadeFiles('.box',function(e){
        this.init({
            MAX : 3, //限制个数
            MH : 5800, //像素限制高度
            MW : 5900, //像素限制宽度
            callback : function(arr){
                console.log(arr)
            }
        });
    });
    var imgFile1 = new ImgUploadeFiles('.box2',function(e){
        this.init({
            MAX : 5,
            MH : 1800, //像素限制高度
            MW : 1900, //像素限制宽度
            callback : function(arr){
                console.log(arr)
            }
        });
    });
    var imgFile3 = new ImgUploadeFiles('.box3',function(e){
        this.init({
            MAX : 3,
            MH : 800, //像素限制高度
            MW : 900, //像素限制宽度
            callback : function(arr){
                console.log(arr)
            }
        });
    });
    var imgFile4 = new ImgUploadeFiles('.box4',function(e){
        this.init({
            MAX : 1,
            MH : 800, //像素限制高度
            MW : 900, //像素限制宽度
            callback : function(arr){
                console.log(arr)
            }
        });
    });

    //----------------------------

    //读取图片实例,并上传到服务器
    var fileBox = document.getElementById('file');
    fileBox.onchange = function () {
        //获取选择文件的数组
        var fileList = fileBox.files;
        for (var i = 0; i < fileList.length; i++) {
            var file = fileList[i];
            //图片类型验证第二种方式
            if (/image\/\w+/.test(file.type))
                readFile(file);
            else
                console.log(file.name + ':不是图片');
        }
    }
    //读取二进制图片文件，并上传到服务器
    function uploadClick() {
//            var fileList = fileBox.files;
        var fileList = imgFile.files;
        for (var i = 0; i < fileList.length; i++) {
            var file = fileList[i];
            //图片类型验证第二种方式
            if (/image\/\w+/.test(file.type))
                uploadFile(file);
            else
                console.log(file.name + ':不是图片');
        }
    }
    //关键代码上传到服务器
    function uploadFile(file) {
        var reader = new FileReader();
        reader.readAsArrayBuffer(file);
        reader.onload = function () {
            var blob = new Blob([reader.result], { type: 'image/jpg' });
            //提交到服务器
            var fd = new FormData();
            fd.append('file', blob);
            var ext = file.name.substring(file.name.lastIndexOf('.'));
            fd.append('extention', ext);
            fd.append('isClip', -1);
            var xhr = new XMLHttpRequest();
            xhr.open('post', 'http://localhost:8080/upload/uploadimg.do', true);
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var data = eval('(' + xhr.responseText + ')');
                    console.info(data);
                    if (data.success) {
                        //上传成功
                        var imgName = data.msg;
                        alert(imgName);
                    } else {
                        alert(data.msg);
                    }
                }
            }
            //开始发送
            xhr.send(fd);
        }
    }
    //读取图片内容 为DataURL
    function readFile(file) {
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function (e) {
            var result = reader.result;
            $('.container blockquote').text(result);
            $('#img1').attr('src', result)
        }
    }

</script>
</body>
</html>